<template>
  <div class="details">
    <div class="opoten">投资人详情</div>
    <div class="texts">
      <div class="on_text">
        <p class="per1">投资人类型:</p>
        <p class="per2">{{ queStr.investorType==1?'企业':'个人' }}</p>
      </div>
      <div class="on_text">
        <p class="per1">划款账号:</p>
        <p class="per2">{{ queStr.bankAccountNumber }}</p>
      </div>
      <div class="on_text">
        <p class="per1">支行信息:</p>
        <p class="per2">{{ queStr.bankSubbranchInfo }}</p>
      </div>
      <div class="on_text">
        <p class="per1">姓名:</p>
        <p class="per2">{{ queStr.investorName }}</p>
      </div>
      <div class="on_text">
        <p class="per1">手机号:</p>
        <p class="per2">{{ queStr.contactPhone }}</p>
      </div>
      <div class="on_text">
        <p class="per1">吧台数量:</p>
        <p class="per2">{{queStr.barCounterCount}}台</p>
      </div>
      <div class="on_text">
        <p class="per1">总收益:</p>
        <p class="per2">￥{{(queStr.balance * 1 + queStr.totalWithdrawal * 1) || 0}}</p>
      </div>
      <div class="on_text">
        <p class="per1">当前余额:</p>
        <p class="per2">￥{{queStr.balance || 0}}</p>
      </div>
      <div class="on_text">
        <p class="per1">累计提现:</p>
        <p class="per2">￥{{queStr.totalWithdrawal || 0}}</p>
      </div>
      <div class="on_text">
        <p class="per1">备注:</p>
        <p class="per2">{{ queStr.remark }}</p>
      </div>
    </div>
    <div class="onte">
      <el-radio-group v-model="tabPosition" style="margin-bottom: 30px">
        <el-radio-button label="onter1">订单记录</el-radio-button>
        <el-radio-button label="onter2">提现记录</el-radio-button>
        <el-radio-button label="onter3">吧台列表</el-radio-button>
      </el-radio-group>
    </div>
    <div class="onchel" v-if="tabPosition == 'onter1'"><orderForm /></div>
    <div class="onchel" v-if="tabPosition == 'onter2'"><Withdrawal /></div>
    <div class="onchel" v-if="tabPosition == 'onter3'"><BarCounter  /></div>
  </div>
</template>

<script>
import Withdrawal from "./components/Withdrawal.vue";
import orderForm from "./components/orderForm.vue";
import BarCounter from "./components/BarCounter.vue";

export default {
  components: {
    Withdrawal,
    orderForm,
    BarCounter
  },
  data() {
    return {
      tabPosition: "onter1",
      queStr:{},
    };
  },
  mounted() {
    this.queStr=this.$route.query
    console.log(this.queStr, '============>this.queStr')
  },
  methods:{
  
  }
};
</script>

<style lang="scss" scoped>
.opoten {
  padding: 20px;
  font-weight: 600;
  font-size: 18px;
}
.texts {
  display: flex;
  flex-wrap: wrap;
  width: 70%;
  .on_text {
    margin-left: 30px;
    margin-top: 5px;
    width: 30%;
    display: flex;
    .per1 {
      width: 90px;
    }
    .per2 {
      margin-left: 10px;
    }
  }
}
.onte {
  padding: 20px 0 0 20px;
}
.onchel {
  width: 90%;
  margin-left: 2%;
}
</style>